<template>
  <el-container>
    <el-header style="height: 200px; padding: 0px"
      ><Header :user="user"></Header
    ></el-header>
    <el-container style="margin: 20px">
      <el-aside width="250px">
        <p>{{ user.nickname }}</p>
        <img style="width: 100%" :src="user.avatarurl" alt="" />
        <ul class="ulTitle">
          <img src="../assets/v.png" alt="" />
          <th>会员中心</th>
          <li @click="change('用户信息')">
            <router-link :to="{ path: '/userInformation', query: { scope: user } }"
              >用户信息</router-link
            >
          </li>
          <!-- <li @click="change('账户安全')"> -->
            <!-- <router-link :to="{ path: '' }">账户安全</router-link> -->
          <!-- </li> -->
          <!-- <li @click="change('资金管理')"> -->
            <!-- <router-link :to="{ path: '' }">资金管理</router-link> -->
          <!-- </li> -->
        </ul>
        <!-- <ul class="ulTitle">
          <img src="../assets/g.png" alt="" />
          <th>交易中心</th>
          <li @click="change('我的订单')">
            <router-link :to="{ path: '' }">我的订单</router-link>
          </li>
          <li @click="change('售后')">
            <router-link :to="{ path: '' }">售后</router-link>
          </li>
          <li @click="change('收货地址')">
            <router-link :to="{ path: '' }">收货地址</router-link>
          </li>
        </ul> -->
        <!-- <ul class="ulTitle">
          <img src="../assets/f.png" alt="" />
          <th>服务中心</th>
          <li @click="change('我的留言')"><router-link :to="{ path: '' }">我的留言</router-link></li>
          <li @click="change('我要开店')"><router-link :to="{ path: '' }">我要开店</router-link></li>
        </ul> -->
        <ul class="ulTitle">
          <img src="../assets/d.png" alt="" />
          <th>店铺管理</th>
          <li v-if="user.identity < 2" @click="change('店铺信息')">
            <router-link :to="{ path: '/storeInformation' }">店铺信息</router-link>
          </li>
          <li v-if="user.identity < 2" @click="change('商品上传')">
            <router-link :to="{ path: '/productUpload' }">商品上传</router-link>
          </li>
          <li v-if="user.identity < 2" @click="change('商品列表')">
            <router-link :to="{ path: '/ProductList' }">商品列表</router-link>
          </li>
          <li v-if="user.identity < 2" @click="change('订单列表')">
            <router-link :to="{ path: '/orderList' }">订单列表</router-link>
          </li>
          <li v-if="user.identity < 2" @click="change('奖品上传')">
            <router-link :to="{ path: '/prizeUpload' }">奖品上传</router-link>
          </li>
          <li v-if="user.identity < 2" @click="change('奖品列表')">
            <router-link :to="{ path: '/prizeList' }">奖品列表</router-link>
          </li>
          <li v-if="user.identity == 2" @click="change('用户列表')">
            <router-link :to="{ path: '/userManagement' }">用户列表</router-link>
          </li>
        </ul>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from "../components/header.vue";
export default {
  data() {
    return {
      user: {},
    };
  },
  created() {
    // 获取本地储存的用户信息
    this.getSession();
  },
  watch: {},
  mounted() {
    // 储存里选择的标题
    this.change(window.sessionStorage.getItem("selectTitle"));
  },
  methods: {
    // 高亮标题
    change(selectTitle) {
      window.sessionStorage.setItem("selectTitle", selectTitle);
      window.scrollTo(0, 0);
      let listLi = document.querySelectorAll(".ulTitle>li");
      listLi.forEach((item) => {
        if (item.children[0].innerText == selectTitle) {
          item.children[0].style.color = "red";
        } else {
          item.children[0].style.color = "";
        }
      });
    },
    getSession() {
      // console.log(this.$route.query.user)
      // let users = JSON.parse(window.sessionStorage.getItem("user"));
      // console.log(users,this.user)

      this.user = JSON.parse(window.sessionStorage.getItem("user"));
      console.log(this.user);
    },
  },
  components: {
    Header,
  },
};
</script>

<style lang="less" scoped>
.el-aside {
  background-color: #f8f8f8;
  p {
    margin: 0px;
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 19px;
    color: white;
    background-color: #e31939;
  }
  ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin: 0px 0px 10px 0px;
    img {
      width: 25px;
      position: relative;
      top: 23px;
      right: 50px;
    }
    li {
      a {
        text-decoration: none;
        color: black;
      }
      list-style: none;
      margin: 6px 0px;
    }
    a:hover {
      color: red;
      cursor: default;
    }
  }
}
.el-main {
  border-top: 2px #f5f5f5 solid;
  background-color: white;
}
</style>